import React, { Component } from 'react';
import { connect } from 'react-redux';
import AdvancedQuery from '../AdvancedQuery';
import AdvancedRelationQuery from '../AdvancedRelationQuery';
import dataCenter from '../../dataCenter';
import NodeSearch from './NodeSearch';
import RelationSearch from './RelationSearch';
import TopologySearch from './TopologySearch';
import {
	Input,
	Collapse,
	Button,
	Row,
	Col,
	Icon,
	Form,
	Select,
	InputNumber,
	Card
} from 'antd';

import * as d3 from 'd3';

const FormItem = Form.Item;
const Option = Select.Option;
const OptGroup = Select.OptGroup;

import {
	updateData,
	demo1,
	demo2,
	getAllNodesCount,
	getDirectedRelationByNodeId,
	getAllRelationshipsCount,
	advancedQueryNodes,
	getAllRelationTypes
} from '../../action';


const Panel = Collapse.Panel;

class ShortcutSearch extends Component {
	componentDidMount() {
		this.props.dispatch(getAllNodesCount());
		this.props.dispatch(getAllRelationshipsCount());
		dataCenter.getLabels().then(labels => {
			this.setState({
				labels
			})
		});
		dataCenter.getPropertyKeys().then(propertyKeys => {
			this.setState({
				propertyKeys
			})
		})
		dataCenter.getAllRelationTypes().then(relationTypes => {
			this.setState({
				relationTypes
			})
		})
	}
	state = {
		directionComType: 'out',
		labels: [],
		propertyKeys: [],
		relationTypes: [],
		minLength: null,
		maxLength: null
	}
	demo1() {
		this.props.setSearchType('');
		this.props.dispatch(demo1());
	}

	demo2 = () => {
		this.props.setSearchType('');
		this.props.dispatch(demo2());
	}

	getAllNodesCount = () => {
		this.props.setSearchType('');
		this.props.dispatch(getAllNodesCount());
	}

	getDirectedRelationByNodeId = () => {
		const startNodeId = this.refs.startNodeId.refs.input.value;
		// const endNodeId = this.refs.endNodeId.refs.input.value;
		if (startNodeId)
		this.props.dispatch(getDirectedRelationByNodeId(startNodeId, this.state.directionComType));
	}

	changeDirection = () => {
		const { directionComType } = this.state;
		if (directionComType === 'all') {
			this.setState({directionComType: 'in'})
		} else if (directionComType === 'in') {
			this.setState({directionComType: 'out'})
		} else if (directionComType === 'out') {
			this.setState({directionComType: 'all'})
		}
	}
	render() {
		const { directionComType, labels, propertyKeys, relationTypes } = this.state;
		let directionCom;
		if (directionComType === 'all') {
			directionCom = <i style={{color: 'red', fontSize: 20, fontWeight: 'bold'}} className="icon iconfont icon-Thesorting"></i>
		} else if (directionComType === 'in') {
			directionCom = <Icon style={{color: 'red', fontSize: 20, fontWeight: 'bold', position: 'relative',top: 7}} type="arrow-up" />
		} else if (directionComType === 'out') {
			directionCom = <Icon style={{color: 'red', fontSize: 20, fontWeight: 'bold', position: 'relative',top: 7}} type="arrow-down" />
		}
		return (
			<Collapse accordion defaultActiveKey={["active"]}>
		    <Panel header="持卡人基于资金流向的关联关系" key="7">
		      <Button onClick={this.demo1.bind(this)}>查询</Button>
		    </Panel>
		    <Panel header="银行资金流向" key="8">
		      <Button onClick={this.demo2}>查询</Button>
		    </Panel>
		    <Panel header="根据节点ID查询指定方向的关系" key="9">
		    	<Row>
		    		<Col span={4} style={{textAlign: 'center', position: 'relative', top: 17, color: '#ea0d0d'}}>{directionCom}</Col>
		    		<Col span={16}>
		    			<Row style={{marginTop: 7}}>
				    		<Input ref="startNodeId" placeholder="startNode"/>
				    	</Row>
				      <Row style={{marginTop: 7, color: '#ccc'}}>
				    		<label style={{paddingLeft: 7}}>endNode</label>
				    	</Row>
		    		</Col>
		    		<Col span={4} style={{textAlign: 'center'}}><Icon style={{fontSize: 20, position: 'relative', top: 28}} type="retweet" onClick={this.changeDirection.bind(null, 'relation')}/></Col>
		    	</Row>
		    	<Row style={{marginTop: 7, textAlign: 'center'}}>
		      	<Button type="primary" onClick={this.getDirectedRelationByNodeId}>查询</Button>
		      </Row>
		    </Panel>
		  </Collapse>
		)
	}
}

function mapState2Props(state) {
	let { graphData: { nodesCount, relationshipsCount } } = state;
	return { nodesCount, relationshipsCount };
}

ShortcutSearch = connect(mapState2Props)(ShortcutSearch);

export default ShortcutSearch;